<template>
  <div id="postList">
    <div class="chooseContainer">
        <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          贴文历史<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="true" >贴文历史</el-dropdown-item>
          <el-dropdown-item :command="false">视频历史</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <ArticleShow v-if="type" :mypost-flag="flag" :post-list="postList"></ArticleShow>
    <div v-if="!type">视频历史功能还没实现</div>
    <div class="footer"></div>
  </div>
</template>
<script>
import ArticleShow from "@/components/User/Article/ArticleShow";
import { getHistory, getPostByPostId } from "@/utils/api";
export default {
  name: "MyPost",
  components: { ArticleShow },
  data() {
    return {
      type:true,//true表示用户查看的式贴文历史，false表示视频历史
      flag: false,
      articleHistory: [], //保存用户浏览过的贴文id
      postList: [],//用户浏览过的贴文
      videoList:[]//保存浏览过的视频
    };
  },
  created() {
    this.initHistory();
  },
  methods: {
    // 初始化数据，获取用户浏览历史
    async initHistory() {
      let result = await getHistory();
      if (result.code == 200) {
        let history = result.data.resultMap; //请求成功，获取用户浏览历史
        // 如果有浏览历史，找出用户贴文浏览历史
        if (history.length != 0) {
          let postHistory = history.filter(
            (item) => item.browseType == "ARTICLE"
          );
          this.articleHistory = postHistory;//保存浏览过的贴文id
          let postList = [];//保存浏览过的所有贴文
          postHistory.forEach(async (item) => {
            let postId = item.id;
            let post = await this.getPostById(postId);
            postList.push(post);
          });
          this.postList = postList;
        }
        // 找出用户视频浏览历史，还没实现
      }
    },
    // 通过贴文id获取贴文信息
    async getPostById(postId) {
      let result = await getPostByPostId(postId);
      let post = result.data.resultMap.post;
      return post;
    },
    // 处理用户选择视频历史还是贴文历史
    handleCommand(command){
      this.type = command;
    }
  },
};
</script>

<style scoped>
.desc:hover {
  box-shadow: 0px 0px 8px #888888;
  cursor: pointer;
}
.desc {
  padding: 5px;
}
.post {
  margin-top: 20px;
}
.footer {
  margin-top: 100px;
}
#postList {
  padding: 5px;
}
.chooseContainer{
  margin: 20px 0 ;
}
</style>
